<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{width:80px;}
    </style>
</head>
<body>
    <input type="text" id="txt1">
    <select id="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
    </select>
    <input type="text" id="txt2">
    <input type="button" id="computed" value="=">
    <input type="text" id="result" readonly>
</body>
<script>

    var t1 = document.querySelector("#txt1");
    var t2 = document.querySelector("#txt2");
    var opera = document.querySelector("#operator");
    var com = document.querySelector("#computed");
    var res = document.querySelector("#result");

    com.onclick = function(){
        // console.log(t1.value + opera.value + t2.value)

        switch(opera.value){
            case "+":
                res.value = Number(t1.value) + (t2.value-0);
                break;
            case "-":
                res.value = Number(t1.value) - (t2.value-0);
                break;
            case "*":
                res.value = Number(t1.value) * (t2.value-0);
                break;
            case "/":
                res.value = Number(t1.value) / (t2.value-0);
                break;
            case "%":
                res.value = Number(t1.value) % (t2.value-0);
                break;
            
        }
    }
    
</script>
</html>